<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/nav.css">
</head>
<body>

    <div id="box">

        <router-view></router-view>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-resource.min.js"></script>
    <script src="./js/vue-router.js"></script>

    <template id="home">
        
            <div class="nav-box">
                <!--<h1>我是主页</h1>-->
                <!--<router-link to='/detail'>去详情页</router-link>-->
                <ul>
                    <li><router-link class="aaa" to='/'><span>首页</span><i>&gt;</i></router-link></li>
                    <li><router-link class="aaa" to='/detail/yingpian'><span>影片</span><i>&gt;</i></router-link></li>
                    <li><router-link class="aaa" to='/detail/yingyuan'><span>影院</span><i>&gt;</i></router-link></li>
                    <li><router-link class="aaa" to='/detail/shang'><span>商城</span><i>&gt;</i></router-link></li>
                    <li><router-link class="aaa" to='/detail/yanchu'><span>演出</span><i>&gt;</i></router-link></li>
                    <li><router-link class="aaa" to='/detail/my'><span>我的</span><i>&gt;</i></router-link></li>
                    <li><router-link class="aaa" to='/detail/maizuo'><span>卖座卡</span><i>&gt;</i></router-link></li>
                </ul>
            </div>

    </template>
    <template id="detail">
        <div>
            <h1>我是详情页面</h1>
            {{$route.params.name}}
        </div>
    </template>
    
    <script>
        //1. 先定义好组件
        var Home = {
            template:'#home'
        }
        var Detail = {
            template:'#detail'
        }
        //2. 定义好路由规则  
        var routes = [
            {
                path:'/home',
                component:Home
            },
            {
                path:'/detail/:name',
                component:Detail
            },
            {
                path:'*',
                redirect:'/home'
            }
        ]
        //3. 实例化一个路由对象
        var router = new VueRouter({
            //将定义好的路由规则写进来
            routes:routes
        })

        //4. 实例化根vue实例
        new Vue({
            el:'#box',
            router:router
        })
    </script>


</body>
</html>